<template>
<div class="homepage" style="height: 100vh;overflow-x: hidden;">
     <!-- 页头 -->
     <el-page-header v-if="onshow" @back="$router.go(0)" content="详情页面">
        </el-page-header>
    <!-- 搜索框 -->
    <el-row type="flex"  justify="start"  class="row-bg" style="height: 70px">
            <el-col :span="24">
                <el-form :inline="true" :v-model="formDate"  class="demo-form-inline" label-position="left" size="medium">
                    <el-form-item label="商品名称">
                        <el-input v-model="formDate.goodName" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="分类">
                        <template>
                            <el-select v-model="formDate.typeId" placeholder="请选择">
                                <el-option
                                v-for="item in typeDate"
                                :key="item.id"
                                :label="item.typeName"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" circle @click="queryGood"></el-button>
                        <el-button type="primary" @click="resetType">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
<!-- 轮播图 或商品表格 -->

        <el-row>
            <el-col :span="18" :offset="3">
                <!-- 轮播图 -->
                <!-- <el-image :src="require('@/assets/wallhaven-m998x9.jpg')"></el-image> -->
                <div class="photo" v-if="isshow">
                    <el-carousel :interval="2000" indicator-position="outside">
                        <el-carousel-item v-for="item in srcList" :key="item">
                            <el-image
                            style="width: 900px; height: 300px"
                            :src=item
                            :fit="fit">
                            </el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
              

                
               
                
            </el-col>
        </el-row>
          <!-- 表格数据 -->
        <el-row>
            <el-col :span="8" v-for="good in pageGoodData.list" :key="good" >
            <el-card :body-style="{ padding: '0px' }">
                    <el-image
                    style="width: 200px; height: 200px"
                    :src="good.goodImg"
                    :fit="fit">
                    </el-image>
                <div style="padding: 14px;">
                    <span>{{good.goodName}}</span>
                    <div class="bottom clearfix">
                        <time class="time">{{ good.typeName }}</time>
                        <h4>¥{{ good.goodPrice}}</h4>
                        <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        </el-row>
    <!-- 分页 -->
        <el-row>
            <div v-if="onshow">
                    <el-pagination
                        background
                        layout="prev,sizes, pager, next,total,jumper"
                        :page-sizes="[1, 5, 10]"
                        @next-click="nextPage"
                        @prev-click="prevPage"
                        @size-change="sizeChange"
                        @current-change="currentPage"

                        :page-size="pageGoodData.pageSize"
                        :current-page="pageGoodData.pageNum"
                        :total="pageGoodData.total"
                        :page-count="pageGoodData.pages">
                    </el-pagination>
                </div>
        </el-row>
        <!-- 卡片显示商品 -->
        <el-row v-if="isshow">
        <el-col :span="6" v-for="good in goodsData" :key="good" :offset="1">
            <el-card :body-style="{ padding: '0px' }">
                    <el-image
                    style="width: 200px; height: 200px"
                    :src="good.goodImg"
                    :fit="fit">
                    </el-image>
                <div style="padding: 14px;">
                   
                    <div class="bottom clearfix">
                        <sapn>{{good.goodName}}</sapn>
                        <span   style="color: red;">[{{ good.typeName }}]</span>
                        <h4 >¥{{ good.goodPrice}}</h4>
                            <el-button type="info"  class="button" round @click="goods(good.id)">详情</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        </el-row>
        <!-- 回到顶部 -->
        <template>
            
            <el-backtop target=".homepage" >
                <div
                style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #19,
                }"
                >
               <i class="el-icon-top"></i>
                </div>
            </el-backtop>
           
        </template>
       

</div>    
</template>
<script>
export default {
    data(){
        return{
            //分页相关
            pageGoodData:{
                list:'',
                total:'',
                pageNum:1,
                pageSize:5,
                pages:''
            },
            formDate:{
                goodName:'',
                typeId:''
            },
            typeDate:'',
            goodsData:'',//商品数据
            srcList: [
                require('@/assets/111.png'),
                require('@/assets/222.png'),
                require('@/assets/333.jpg'),
                require('@/assets/444.jpg'),
                

            ],
            isshow:true,
            onshow:false
        }
    },
    methods:{
        goods(id){
            this.$router.push({path:'/goods',query:{goodId:id}});
        },
        //重置搜索框
        resetType(){
            this.formDate.goodName='';
            this.formDate.typeId='';
        },
        //查询商品
        queryGood(){
            this.isshow=false;
            this.onshow =true;
            let jwt=localStorage.getItem("jwt");
            var url = '/api/goods/queryGoods?goodName=' + this.formDate.goodName+'&typeId='+this.formDate.typeId+'&pageNum='+this.pageGoodData.pageNum + '&pageSize=' + this.pageGoodData.pageSize;
            this.$axios.get(url,{headers:{"jwt":jwt}})
                .then(response =>{
                    // console.log(response.data);
                    if(response.data.code==200){
                    this.pageGoodData=response.data.data;
                    // this.$message.success(response.data.msg);
                    }else {
                    this.pageGoodData.list=null;
                    this.pageGoodData.pages=0;
                    this.pageGoodData.total=0;
                    this.pageGoodData.pageNum=1;
                    this.pageGoodData.pageSize=5;
                    this.$message.warning(response.data.msg);
                    }
                });
            },
             //分页相关
            nextPage(pageNo){
            this.pageGoodData.pageNum=pageNo;
            },
            prevPage(pageNo){
            this.pageGoodData.pageNum=pageNo;
            },
            currentPage(pageNo){
            this.pageGoodData.pageNum=pageNo;
            this.queryGood();
            },
            sizeChange(size){
            this.pageGoodData.pageSize=size;
            if (this.pageGoodData.pageNum!=1){
                this.pageGoodData.pageNum=1;
            }else{
                this.queryGood();
            }
            },

    },
    created(){
         let jwt= localStorage.getItem("jwt");
        this.$axios.get("/api/type/queryList",{headers:{'jwt':jwt}})
        .then(response =>{
            console.log(response.data);
            this.typeDate=response.data.data.list;
        });
           
        this.$axios.get('/api/goods/queryGoods',{headers:{"jwt":jwt}})
            .then(response =>{
                // console.log(response.data);
                if(response.data.code==200){
                this.goodsData=response.data.data.list;
                 console.log(this.goodsData);  
                }
            });
    }
}
</script>
<style scoped>
     .el-carousel__item  {
    /* color: #475669; */
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

</style>